html-08 雪碧图
一、CSS hack
1.属性hack _只有ie6及以下版本会显示这个属性；
*只有ie7及以下版本会显示这个属性；
\9 ie6及以上的ie浏览器显示这个属性(\9放在属性值的后面)
\0 ie8及以上版本显示这个属性；
2.选择符级hack;
*html只有ie6里面会显示；
*+html只有ie7里面会显示；
3.条件hack：用于选择ie浏览器及ie的不同版本。
if条件Hack是HTML级别的（包含但不仅是CSS的Hack，可以选择任何HTML代码块）
if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本
● 大于：选择大于指定版本的IE版本。关键字：gt（greater than）
● 大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）
● 小于：选择小于指定版本的IE版本。关键字：lt（less than）
● 小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）
● 非指定版本：选择除指定版本外的所有IE版本。关键字：!
只在IE中可见 代码示例：
<!--[if IE]>
<p>只在IE中能看到这个段落</p>
<![endif]-->
<!--[if IE 8]>
<style></style> //这里面写的只有ie8能显示
<![endif]-->
<!--[if IE]>
<p>只在IE中能看到这个段落</p>
<![endif]-->二、用css的border设置三角形，在ie6里面不兼容的问题。
1.在ie6里面transparent不兼容，显示黑色。
解决办法，把需要设置透明的边框设置成点状或虚线。
2.在ie6里面设置左边或者右边的三角形，会少个尖儿。
是因为ie6里面的最小高度引起的问题。
解决办法：给这个元素设置font-size:0;line-height:0;overflow:hidden。
三、banner图布局
1.先切片将左右两边的宽度相等，留下中间的部分，如果页面宽度是1920，则设置宽度为100%； 2.切中间的一块，如果不准确，可以修改一下切片宽度，
四、大背景布局，
五、透明
1.rgba 设置背景透明
a表示alpha取值：从0到1，数值越大，越不透明；
background:rgba(0,0,0,0.8);
2.ie浏览器兼容性
opacity 设置元素的不透明度。（元素文字都透明）
取值：从0到1，数值越大，越不透明
opacity: 0.5;
filter:alpha(opacity=50);
六、雪碧图，精灵图，css sprites；
优点：
（1）减少网页的http请求，从而大大的提高页面的性能
（2）图片命名上的困扰。
（3）更换风格方便。
缺点：
（1）必须要限定容器大小，复合背景图元素位置需要计算。
（2）维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片。
七、常用的图片格式
1.jpg 优点：色彩丰富，文件小。
缺点：有损压缩，反复保存，图片质量下降明显。
使用场景：色彩丰富的图片/渐变图像。
2.gif 优点：文件小，支持动画，透明，无兼容性问题。
缺点：只支持256种颜色，色彩简单的logo/icon/动图
使用场景：色彩简单的logo/icon/动图。
3.png 优点：无损压缩，支持透明，简单图片尺寸小。
缺点：不支持动画，色彩丰富的图片尺寸大。
使用场景：logo/icon/透明图。
面试题
● 用纯CSS实现小箭头的思路？
● 简述精灵图的原理及优缺点？
● 简述网页中常见图片格式及特点？